<template>
    <div>
        
        <el-header>
            <el-row :gutter="20">
                <el-col :span="18">
                    <h2>代码构建</h2>
                    <span style="color: red">{{warningText}}</span>
                </el-col>
                <el-col :span="6" style="padding: 15px">
                    <el-button type="success" size="mini" @click="constructionCode">开始构建</el-button>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-row :gutter="20">
                <el-col :span="24">
                    代码保存路径：
                    <el-input v-model="codePath" placeholder="请输入代码保存路径"></el-input>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="checkedOptions" @change="handleCheckedCitiesChange">
                        <el-checkbox v-for="city in options" :label="city" :key="city">{{city}}</el-checkbox>
                    </el-checkbox-group>
                </el-col>
            </el-row>
        </el-main>
    </div>
</template>

<script>
/* eslint-disable */
    export default {
      name: 'fieldManage',
      data (){
          return {
              options: ['PO','repository','service','controller','vue'],
              checkedOptions: ['PO','repository','service','controller','vue'],
              checkAll: true,
              isIndeterminate: true,
              tableList: [],
              formId: '',
              codePath: '',
              warningText: ''
          }
      },
      created () {
        this.init()
      },
      activated () {
        this.init()
      },
      methods: {
        init (){
            // let id = this.$route.query.id
            let formId = this.$route.query.formId
            console.log("formId:", formId)
            if (formId !== null && formId !== undefined && formId!== '') {
                this.formId = formId
            } else {
                this.warningText = '表单基础信息未保存，请先保存后重新打开该页面'
                this.$message.error(this.warningText); 
            }
        },
        handleCheckAllChange(val) {
            this.checkedOptions = val ? this.options : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.options.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
        },
        constructionCode (){
            let formId = this.$route.query.formId
            console.log("formId:", formId)
            if (formId !== null && formId !== undefined && formId!== '') {
                this.formId = formId
            } else {
                this.warningText = '表单基础信息未保存，请先保存后重新打开该页面'
                this.$message.error(this.warningText); 
            }

            if (this.formId !== '') {
               this.$http({
                url: this.$http.adornUrl('/form/constructionCode'),
                method: 'post',
                params: this.$http.adornParams({
                  'formId': this.formId,
                  'codePath': this.codePath
                })
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '保存成功',
                    type: 'success'
                  })
                }
              })
            } else {
               this.$message.error('表单基础信息未保存，请先保存后重新打开该页面'); 
            }
        }
      }
    }
</script>

<style scoped>
    .list-cust-item{
        padding: 10px 0px;
        text-align: center;
    }
    .field-list {
        border-bottom: 1px solid rgb(240, 240, 240);
        padding-top: 6px;
    }
    .el-header {
        background-color: #f0f0f0;
        border-bottom: 1px solid #f1f1f1;
    }
</style>
